<template>
  <section>
    <el-table
      :data="tableData"
      highlight-current-row
      @selection-change="handleSelectionChange"
      :row-key="rowKey ? rowKey : 'id'"
      :lazy="lazy ? true : false"
      :load="lazy && load"
      :show-summary="showSummary && showSummary"
      :summary-method="summaryMethod && summaryMethod"
      :span-method="spanMethod && spanMethod"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :height="height && height"
    >
      <slot></slot>
      <section v-for="(item, index) in columns" :key="index">
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :width="item.width && item.width"
          :fixed="item.fixed && 'left'"
          v-if="item.scope"
        >
          <template slot-scope="scope">
            <template v-if="item.checkbox">
              <el-checkbox v-model="scope.row[item.prop]"></el-checkbox>
            </template>
            <template v-if="item.radioBox">
              <input
                type="radio"
                @change="item.change && item.change(scope.$index, scope.row)"
                name="1"
              />
            </template>
            <template v-if="item.radio">
              <el-radio-group v-model="scope.row[item.prop]">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="2">禁用</el-radio>
              </el-radio-group>
            </template>
            <template v-else-if="item.select">
              <el-select
                v-model="scope.row[item.prop]"
                placeholder="请选择"
                :multiple="item.multiple ? true : false"
                collapse-tags
                :disabled="
                  scope.row.disabled
                    ? true
                    : item.key
                    ? scope.row[item.key]
                      ? true
                      : false
                    : item.disabled && item.disabled
                "
                @change="
                  item.change &&
                    item.change(scope.row[item.prop], scope.$index, scope.row)
                "
                @focus="
                  item.focus &&
                    item.focus(scope.row[item.prop], scope.$index, scope.row)
                "
              >
                <el-option
                  v-for="(subItem, subIndex) in item.options"
                  :key="subIndex"
                  :label="subItem.label"
                  :value="subItem.value"
                >
                </el-option>
              </el-select>
            </template>
            <template v-if="item.input">
              <el-input
                v-model="scope.row[item.prop]"
                v-if="!scope.row['hidden']"
                :disabled="item.disabled && item.disabled"
                :type="item.type && item.type"
                @blur="
                  item.blur &&
                    item.blur(scope.row[item.prop], scope.row, scope.$index)
                "
                @input="
                  item.input &&
                    item.input(
                      scope.row[item.prop],
                      item.prop,
                      scope.$index,
                      scope.row
                    )
                "
              ></el-input>
            </template>
            <template v-if="item.date">
              <el-date-picker
                v-model="scope.row[item.prop]"
                :picker-options="item.limit && pickerOptions"
                :disabled="item.disabled && item.disabled"
                @change="
                  item.change &&
                    item.change(scope.row[item.prop], item.prop, scope.$index)
                "
                type="date"
                :placeholder="item.placeholder"
                value-format="yyyy-MM-dd"
              />
            </template>
            <template v-if="item.daterange">
              <el-date-picker
                v-model="scope.row[item.prop]"
                :picker-options="item.limit && pickerOptions"
                :disabled="item.disabled && item.disabled"
                @change="
                  item.change &&
                    item.change(scope.row[item.prop], item.prop, scope.$index)
                "
                type="daterange"
                range-separator="-"
                :start-placeholder="
                  item.startPlaceholder ? item.startPlaceholder : '开始日期'
                "
                :end-placeholder="
                  item.endPlaceholder ? item.endPlaceholder : '结束日期'
                "
                value-format="yyyy-MM-dd"
              />
            </template>
            <template v-if="item.cascader">
              <el-cascader
                size="large"
                :options="item.options"
                v-model="scope.row[item.prop]"
                :disabled="item.disabled && item.disabled"
                :placeholder="
                  !item.disabled ? (item.label ? item.label : '请选择') : ''
                "
                @change="item.change && item.change"
              >
              </el-cascader>
            </template>
            <template v-if="item.image">
              <viewer
                :images="[
                  scope.row[item.prop]
                    ? scope.row[item.prop]
                    : require('../../assets/images/logo.jpg'),
                ]"
              >
                <img
                  class="p-icon"
                  :src="
                    scope.row[item.prop]
                      ? scope.row[item.prop]
                      : require('../../assets/images/logo.jpg')
                  "
                />
              </viewer>
            </template>
            <template v-if="item.link">
              <div
                class="link"
                @click="item.click && item.click(scope.row)"
                :title="scope.row[item.prop]"
              >
                <template v-if="!item.formatter">{{
                  scope.row[item.prop]
                }}</template>
                <template v-else>{{
                  scope.row[item.prop]
                    ? item.formatterName[0]
                    : item.formatterName[1]
                }}</template>
              </div>
            </template>
            <template v-if="item.custom">
              <slot :name="item.slotName" :data="scope.row[item.slotName]" />
            </template>
          </template>
        </el-table-column>
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :width="item.width && item.width"
          :fixed="item.fixed && item.fixed"
          :align="item.align && item.align"
          :formatter="item.formatter"
          :show-overflow-tooltip="item.hiddenTooltip ? false : true"
          :filters="item.filters && item.filters"
          :filter-method="item.filtersMethod && item.filtersMethod"
          :render-header="item.renderHeader && item.renderHeader"
          :type="item.type"
          v-else
        >
          <template v-if="item.children">
            <el-table-column
              :prop="subItem.prop"
              :label="subItem.label"
              :width="subItem.width && subItem.width"
              v-for="(subItem, subIndex) in item.children"
              :key="subIndex"
              :formatter="subItem.formatter"
              :show-overflow-tooltip="true"
            />
          </template>
        </el-table-column>
      </section>
      <el-table-column
        label="操作"
        v-if="operation && operation.length > 0"
        :width="operation[0].width"
        :fixed="operation[0].fixed && 'right'"
      >
        <template slot-scope="scope">
          <div class="operationBtn">
            <a
              v-for="(item, index) in operation"
              :key="index"
              class="btn"
              v-if="
                item.isHidden
                  ? scope.row.disabled
                    ? false
                    : true
                  : true && filterAuth(scope, item, operation, user)
              "
              @click="
                item.onclick && item.onclick(scope.$index, scope.row, parentKey)
              "
            >
              <template v-if="item.isLabel">
                <template v-if="item.keyValue">{{
                  scope.row[item.keyValue] == item.value
                    ? item.isLabel
                    : item.label
                }}</template>
                <template v-else>{{
                  scope.row.status == item.value ? item.isLabel : item.label
                }}</template>
              </template>
              <template v-else-if="item.upLoadFile">
                <UpLoadFile
                  :uploadData="{
                    scope: true,
                    id: scope.row.id,
                    onChange: (value) => {
                      item.onChange(value, scope.$index);
                    },
                  }"
                >
                  {{ item.label }}
                </UpLoadFile>
              </template>
              <template v-else-if="item.hidden && !scope.row.hasChildren">
                {{ scope.row.hiddenName === item.label ? "" : item.label }}
              </template>
              <template v-else-if="item.isParent">
                {{ scope.row.hasParent ? item.label : "" }}
              </template>
              <template v-else-if="item.upMove">
                {{ scope.$index !== 0 ? item.label : "" }}
              </template>
              <template v-else-if="item.downMove">
                {{ scope.$index !== tableData.length - 1 ? item.label : "" }}
              </template>
              <template v-else>
                {{ scope.row.hasChildren ? "" : item.label }}
              </template>
            </a>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="pagination"
      layout="total, prev, pager, next, jumper"
      @current-change="onChange"
      :page-size="pagination.pageSize"
      :page-sizes="[10, 20, 30, 40, 50]"
      :total="pagination.total"
      :current-page="page"
    />
  </section>
</template>
<script>
import UpLoadFile from "@/components/uploadFile/index.vue";
import { storage } from "@/utils/util.js";
export default {
  components: {
    UpLoadFile,
  },
  data() {
    return {
      page: 1,
      pickerOptions: {
        //日期限制内容
        disabledDate(time) {
          return time.getTime() >= new Date().getTime();
        },
      },
      user: storage.getStorage("user"),
    };
  },
  props: [
    "columns",
    "tableData",
    "operation",
    "pagination",
    "edit",
    "height",
    "lazy",
    "rowKey",
    "showSummary",
    "summaryMethod",
    "spanMethod",
    "parentKey",
  ],
  watch: {
    pagination: {
      handler(news, old) {
        if (news) {
          this.page = news.page;
          this.pagination = news;
        }
      },
      deep: true,
    },
  },

  methods: {
    //选择分页
    onChange(value) {
      if (this.$parent.pagination) {
        this.$parent.pagination.page = value;
        this.$parent[this.pagination.onChange](
          this.UpDataObj(this.$parent.searchData, ["startDate", "endDate"])
        );
      } else {
        this.$emit("handlePageChange", value);
      }
    },
    //选择回调
    handleSelectionChange(val) {
      this.$emit("handleSelectionChange", val);
    },
    //懒加载回调
    load(tree, treeNode, resolve) {
      this.$emit("handleLoad", tree, resolve);
    },
    //过滤权限
    filterAuth(scope, item, operation, user) {
      let flag = false;
      if (item.isAuth) {
        //判断权限是否存在
        if (typeof item.isAuth == "string") {
          let roleFlag = false;
          if (user.roleCodeList.includes(item.isRole)) {
            // 配置特殊角色可以显示操作
            roleFlag = true;
          }
          if (scope.row[item.isAuth] == user.userCode || user.isManagerRole) {
            //权限按钮状态,当前用户或管理员
            flag = this.filterMore(scope, item, operation, user, flag);
          } else {
            flag = false;
          }
        } else {
          flag =
            item.status && this.filterMore(scope, item, operation, user, flag);
        }
      } else {
        flag = this.filterMore(scope, item, operation, user, flag);
      }
      return flag;
    },
    filterMore(scope, item, operation, user, flag) {
      if (item.scope) {
        //是否自定义属性
        flag = item.key.includes(scope.row[operation[0].keyValue])
          ? true
          : false;
      } else {
        flag = true;
      }
      return flag;
    },
  },
};
</script>

<style lang="scss">
.el-picker-panel__content {
  margin: 0 !important;
}
.el-cascader {
  width: 100%;
}
</style>
